<template>
	<!--本文件由FirstUI授权予秦皇岛玄铁网络科技（会员ID：2  0 26，营业执照号：91 13 0    30   2M A7  E   2  FJF80）专用，请尊重知识产权，勿私下传播，违者追究法律责任。-->
	<view class="fui-wrap">
		<view class="fui-bg__box">
			<image src="https://media-cdn.threeperson.com/static/share_bg_01.jpeg" mode="widthFix" class="fui-share__bg"></image>
            
			<view class="fui-logo__box">
				<!-- <image class="fui-logo" src="/static/image/logo.png"></image> -->
                <!-- <view class="fui-text" style="padding-top: 30rpx;">浏览美图,点亮幸福</view> -->
                <view class="fui-qrcode__box">
                    <image :src="userQrcode" mode="widthFix" class="fui-qrcode"></image>
                </view>

			</view>
            
		</view>
	
		<view class="fui-btn__box">
			<!-- <fui-button open-type="share" @tap="share" radius="100rpx" class="share-btn" :margin="['32rpx','0','32rpx']">
				<view class="fui-flex__center">
					<image class="fui-share__ic" src="/static/image/icon_share_3x.png"></image>
					<text>分享好友</text>
				</view>
			</fui-button> -->
			<fui-button radius="100rpx" background="#cbecbd" color="#333333" borderColor="#465CFF"
				@click="generatePoster" :margin="['32rpx','0','32rpx']">
				<view class="fui-flex__center">
					<image class="fui-share__ic" src="/static/image/icon_picture_3x.png"></image>
					<text>生成海报</text>
				</view>
			</fui-button>
		</view>
		<fui-poster ref="generator" :width="750" :height="1334" @ready="ready"></fui-poster>
	</view>
</template>
<script src="./share.ts" lang="ts"></script>

<style>
	.fui-wrap {
		width: 100%;
		padding: 0 64rpx 64rpx;
		box-sizing: border-box;
	}

	.fui-bg__box {
		width: 100%;
		position: relative;
	}

	.fui-share__bg {
		width: 100%;
		height: 466rpx;
		display: block;
		/* margin-top: 112rpx; */
	}

	.fui-logo__box {
		width: 100%;
		position: absolute;
		top: 195rpx;
		left: 0;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.fui-logo {
		width: 96rpx;
		height: 96rpx;
		border-radius: 16rpx;
	}

	.fui-text {
		font-size: 35rpx;
		padding-top: 32rpx;
        color:white;
        font-weight: bold;
        font-family: Arial, Helvetica, sans-serif;
	}

	.fui-qrcode__box {
        width: 340rpx;
        height: 340rpx;
        padding: 56rpx;
        box-sizing: border-box;
        background: #ffffff00;
        box-shadow: 0 20rpx 20rpx 0 rgba(9, 41, 134, 0.12);
        border-radius: 48rpx;
        margin: 320rpx auto 0;
        position: relative;
        z-index: 10;
	}

	.fui-qrcode {
		width: 100%;
		height: 400rpx;
	}

	.fui-btn__box {
		width: 100%;
	}

	.fui-share__ic {
		width: 48rpx;
		height: 48rpx;
		margin-right: 16rpx;
	}

	.fui-ani__box {
		width: 600rpx;
		border-radius: 24rpx;
	}

	.fui-poster__img {
		width: 100%;
		border-radius: 24rpx;
		margin-bottom: 30rpx;
		display: block;
	}
::v-deep  .share-btn{
    background: -webkit-linear-gradient(90deg, rgb(70, 92, 255) 0%, rgb(104, 49, 255) 100%);

}
</style>